<template>
    <div>
        <el-card>
            <!-- form表单 -->
            <el-form inline=true>
                <!-- 一级分类 -->
                <el-form-item label="一级分类" >
                    <el-select :disabled="scene===0?false:true" style="width: 240px" v-model="useCategroystore.c1Id" @change="hanlder1">
                        <el-option
                            v-for="(c1) in useCategroystore.c1Arr" 
                                :key="c1.id" 
                                :label="c1.name"
                                :value="c1.id"
                        ></el-option> 
                    </el-select>
                </el-form-item>
                <!-- 二级分类 -->
                <el-form-item label="二级分类">
                    <el-select :disabled="scene===0?false:true" style="width: 240px" v-model="useCategroystore.c2Id" @change="hanlder2">
                        <el-option 
                        v-for="(c2) in useCategroystore.c2Arr" 
                            :key="c2.id"
                            :label="c2.name"
                            :value="c2.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 三级分类 -->
                <el-form-item label="三级分类">
                    <el-select :disabled="scene===0?false:true" style="width: 240px" v-model="useCategroystore.c3Id">
                        <el-option 
                        v-for="(c3) in useCategroystore.c3Arr"
                         :key="c3.id"
                         :label="c3.name"
                         :value="c3.id"></el-option>
                        
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang='ts'>
//引入组件挂载完毕方法
import { onMounted } from 'vue';
//引入仓库
import useCategroyStore from '@/store/modules/Category';
const useCategroystore=useCategroyStore()

//接受父组件传递的值
defineProps(['scene'])
//分类全局组件挂载完毕，通知仓库发送请求获取一级分类数据
onMounted(()=>{
    getC1()
})
//通知仓库获取一级分类的方法
const getC1=()=>{
    //通知仓库获取一级分类的数据
    useCategroystore.getC1()   
}
//通知仓库获取二级分类的方法
const hanlder1=()=>{
    useCategroystore.c2Id=''
    useCategroystore.c3Arr=[]
    useCategroystore.c3Id=''
    
    useCategroystore.getC2()
}
//通知仓库获取三级分类的方法
const hanlder2=()=>{
    useCategroystore.c3Id=''
    useCategroystore.getC3()
}


</script>

<style scoped lang='scss'>

</style>